<template>
  <div id="header_pic" class="pic_wrap">
    <div class="banner">
      <div id="bgimg" class="bgimg pcitem img-animate" :style="{ backgroundImage: `url(${imgUrl})` }"></div>
      <div class="info_text">
        <div class="ad_title">{{ ch }}</div>
        <div class="banner_line"></div>
        <div class="ad_sum">{{ en }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BigpicWidget',
  props: {
    bgurl: {
      type: String,
      required: true
    },
    ch: {
      type: String,
      required: true
    },
    en: {
      type: String,
      required: true
    }
  },
  computed: {
    imgUrl: function () {
      return require('../assets/' + this.bgurl)
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      const scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop
      const bgimg = document.querySelector('#bgimg')
      if (scrollTop > 0) {
        const k2 = scrollTop / 2
        bgimg.style.backgroundPositionY = `calc(50% + ${Math.abs(k2)}px)`
      } else {
        bgimg.style.backgroundPositionY = '50%'
      }
    }
  }
}
</script>

<style lang="less" scoped>
#header_pic {
  margin-top: 50px;
}

.pic_wrap {
  margin-left: auto;
  margin-right: auto;
  min-height: 12rem;
  width: 100%;
  .banner {
    position: relative;
    display: flex;
    justify-content: center;
    height: 480px;
    min-width: 300px;
    overflow: hidden;
    background-color: #000;
    .bgimg {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: no-repeat 50%/cover;
    }
    .info_text {
      display: flex;
      position: absolute;
      flex-direction: column;
      align-items: center;
      top: 54%;
      width: 90%;
      color: #fff;
      line-height: 1.6;
      z-index: 4;
      transform: translateY(-50%);
      .ad_title {
        font-size: 40px;
        font-weight: 300;
        letter-spacing: 5px;
      }
      .banner_line {
        height: 2px;
        width: 50px;
        background: #fff;
        margin: 20px auto;
      }
      .ad_sum {
        font-size: 26px;
        font-weight: 400;
        letter-spacing: 2px;
        font-weight: 300;
        text-transform: uppercase;
      }
    }
  }
}

.bgimg {
  opacity: .6;
}
</style>
